Created
May 20, 2024 13:59
-
-
Save rayliverified/e0f05d454f8cee708c8c8f87a2e90afc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:google_fonts/google_fonts.dart'; | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return const MaterialApp( | |
title: 'MyApp Demo', | |
debugShowCheckedModeBanner: false, | |
home: Scaffold( | |
body: FeatureBlockItemsGridWithImageGridStaggered(), | |
), | |
); | |
} | |
} | |
class FeatureBlockItemsGridWithImageGridStaggered extends StatelessWidget { | |
const FeatureBlockItemsGridWithImageGridStaggered({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
width: 1500, | |
clipBehavior: Clip.hardEdge, | |
decoration: const BoxDecoration(), | |
child: Container( | |
width: double.infinity, | |
margin: const EdgeInsets.symmetric(horizontal: 48, vertical: 80), | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: [ | |
Flexible( | |
child: Container( | |
width: double.infinity, | |
clipBehavior: Clip.hardEdge, | |
constraints: const BoxConstraints( | |
maxWidth: 800, | |
), | |
decoration: const BoxDecoration(), | |
child: Column( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
SizedBox( | |
width: double.infinity, | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: [ | |
Expanded( | |
child: SizedBox( | |
width: double.infinity, | |
child: Column( | |
mainAxisAlignment: | |
MainAxisAlignment.spaceBetween, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
Container( | |
width: 80, | |
height: 80, | |
alignment: Alignment.center, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFEFF1F9), | |
borderRadius: BorderRadius.circular(22), | |
), | |
child: const Icon( | |
Icons.phone_android, | |
size: 40, | |
color: Color(0xFF5C69E5), | |
), | |
), | |
const SizedBox(height: 24), | |
Text( | |
'Android', | |
style: GoogleFonts.getFont( | |
'Poppins', | |
color: Colors.black, | |
fontSize: 32, | |
fontWeight: FontWeight.w500, | |
), | |
), | |
const SizedBox(height: 8), | |
Text( | |
'Customize components to match your design perfectly.', | |
style: GoogleFonts.getFont( | |
'Poppins', | |
color: Colors.black, | |
fontSize: 18, | |
height: 1.3, | |
), | |
) | |
], | |
), | |
), | |
), | |
const SizedBox(width: 60), | |
Expanded( | |
child: SizedBox( | |
width: double.infinity, | |
child: Column( | |
mainAxisAlignment: | |
MainAxisAlignment.spaceBetween, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
Container( | |
width: 80, | |
height: 80, | |
alignment: Alignment.center, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFEFF1F9), | |
borderRadius: BorderRadius.circular(22), | |
), | |
child: const Icon( | |
Icons.home, | |
size: 40, | |
color: Color(0xFF5C69E5), | |
), | |
), | |
const SizedBox(height: 24), | |
Text( | |
'iOS', | |
style: GoogleFonts.getFont( | |
'Poppins', | |
color: Colors.black, | |
fontSize: 32, | |
fontWeight: FontWeight.w500, | |
), | |
), | |
const SizedBox(height: 8), | |
Text( | |
'Get code output that you can tailor to your specific needs.', | |
overflow: TextOverflow.ellipsis, | |
maxLines: 4, | |
style: GoogleFonts.getFont( | |
'Poppins', | |
color: Colors.black, | |
fontSize: 18, | |
height: 1.3, | |
), | |
) | |
], | |
), | |
), | |
) | |
], | |
), | |
), | |
const SizedBox(height: 60), | |
SizedBox( | |
width: double.infinity, | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: [ | |
Expanded( | |
child: SizedBox( | |
width: double.infinity, | |
child: Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
Container( | |
width: 80, | |
height: 80, | |
alignment: Alignment.center, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFEFF1F9), | |
borderRadius: BorderRadius.circular(22), | |
), | |
child: const Icon( | |
Icons.web_stories, | |
size: 40, | |
color: Color(0xFF5C69E5), | |
), | |
), | |
const SizedBox(height: 24), | |
Text( | |
'Web', | |
style: GoogleFonts.getFont( | |
'Poppins', | |
color: Colors.black, | |
fontSize: 32, | |
fontWeight: FontWeight.w500, | |
), | |
), | |
const SizedBox(height: 8), | |
Text( | |
'Integration into any web project is a breeze.', | |
overflow: TextOverflow.ellipsis, | |
maxLines: 4, | |
style: GoogleFonts.getFont( | |
'Poppins', | |
color: Colors.black, | |
fontSize: 18, | |
height: 1.3, | |
), | |
) | |
], | |
), | |
), | |
), | |
const SizedBox(width: 60), | |
Expanded( | |
child: SizedBox( | |
width: double.infinity, | |
child: Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
Container( | |
width: 80, | |
height: 80, | |
alignment: Alignment.center, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFEFF1F9), | |
borderRadius: BorderRadius.circular(22), | |
), | |
child: const Icon( | |
Icons.dark_mode, | |
size: 40, | |
color: Color(0xFF5C69E5), | |
), | |
), | |
const SizedBox(height: 24), | |
Text( | |
'Desktop', | |
style: GoogleFonts.getFont( | |
'Poppins', | |
color: Colors.black, | |
fontSize: 32, | |
fontWeight: FontWeight.w500, | |
), | |
), | |
const SizedBox(height: 8), | |
Text( | |
'Codelessly works seamlessly for both apps and websites.', | |
overflow: TextOverflow.ellipsis, | |
maxLines: 4, | |
style: GoogleFonts.getFont( | |
'Poppins', | |
color: Colors.black, | |
fontSize: 18, | |
height: 1.3, | |
), | |
) | |
], | |
), | |
), | |
) | |
], | |
), | |
) | |
], | |
), | |
), | |
), | |
const SizedBox(width: 80), | |
Flexible( | |
child: Container( | |
width: double.infinity, | |
clipBehavior: Clip.hardEdge, | |
constraints: const BoxConstraints( | |
maxWidth: 600, | |
), | |
decoration: const BoxDecoration(), | |
child: Row( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: [ | |
Expanded( | |
child: SizedBox( | |
width: double.infinity, | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
Container( | |
width: double.infinity, | |
height: 300, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFEFF1F9), | |
image: const DecorationImage( | |
image: NetworkImage( | |
'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/Qv1csB2UnHh6W3B2Xwmp68RXD642%2Fuploads%2Fimages%2Fcc154800_f65d_1d20_9ff4_63434f4818b4_codelessly_gallery_image_1.png?alt=media&token=910c8921-0c68-4ed3-bffe-e653388ccf15', | |
), | |
fit: BoxFit.cover, | |
), | |
borderRadius: BorderRadius.circular(15), | |
), | |
), | |
const SizedBox(height: 16), | |
Container( | |
width: double.infinity, | |
height: 200, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFEFF1F9), | |
image: const DecorationImage( | |
image: NetworkImage( | |
'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/Qv1csB2UnHh6W3B2Xwmp68RXD642%2Fuploads%2Fimages%2F963d9580_f729_1d20_9ff4_63434f4818b4_codelessly_gallery_image_2.png?alt=media&token=20074021-3117-49e2-9324-587c4a94a93e', | |
), | |
fit: BoxFit.cover, | |
), | |
borderRadius: BorderRadius.circular(15), | |
), | |
) | |
], | |
), | |
), | |
), | |
const SizedBox(width: 16), | |
Expanded( | |
child: Container( | |
height: 516, | |
alignment: Alignment.bottomCenter, | |
child: SizedBox( | |
width: double.infinity, | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
Container( | |
width: double.infinity, | |
height: 200, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFEFF1F9), | |
image: const DecorationImage( | |
image: NetworkImage( | |
'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/Qv1csB2UnHh6W3B2Xwmp68RXD642%2Fuploads%2Fimages%2F51f9d600_f7b9_1d20_9ff4_63434f4818b4_codelessly_gallery_image_3.png?alt=media&token=f17f84fa-5c98-45e8-847f-911f21741a46', | |
), | |
fit: BoxFit.cover, | |
), | |
borderRadius: BorderRadius.circular(15), | |
), | |
), | |
const SizedBox(height: 16), | |
Container( | |
width: double.infinity, | |
height: 300, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFEFF1F9), | |
image: const DecorationImage( | |
image: NetworkImage( | |
'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/Qv1csB2UnHh6W3B2Xwmp68RXD642%2Fuploads%2Fimages%2F4803c180_f811_1d20_9ff4_63434f4818b4_codelessly_gallery_image_4.png?alt=media&token=c44f6693-5fbe-4d38-aff3-606f925f3ded', | |
), | |
fit: BoxFit.cover, | |
), | |
borderRadius: BorderRadius.circular(15), | |
), | |
) | |
], | |
), | |
), | |
), | |
) | |
], | |
), | |
), | |
) | |
], | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment